Empty states for image reading by rivalee · Pull Request #346 · NHSDigital/manage-breast-screening-prototype

rivalee · 2026-06-25T14:57:14Z

Ticket: https://nhsd-jira.digital.nhs.uk/browse/DTOSS-13234

Context

Most of our designs assume there's a large backlog of cases. What happens when there aren't enough, or aren't any?

We need some empty states for image reading.

Covering main situations:

No eligible cases to read (eg you've done all the first or second reads possible)
No cases at all to read, backlog empty
Low number of cases in backlog, and another reader has read cases in your allotted 25, so there's an unexpectedly lower number of cases to read

Update generic start page content

To accommodate default number of cases being under 25 (more likely for the tests)

Empty state start page for image reading (no cases)

Interstitial / interruption when there's no more cases to read

Session overview

Only 10 cases left in backlog (completed)
When no more cases to read, don't show new session button

localhost_3000_reading_session_fs9g26tz_your-reads

…hen all cases read

dannychadburn · 2026-06-26T13:52:33Z

@rivalee - need to look at the 'Opinion summary' on the session overview page which shows 'X remaining' and 'X more in this session' when a session has been ended prematurely because it ran out of cases

dannychadburn · 2026-06-26T13:54:25Z


+  {% elif userReadableTotal == 0 %}
+
+    <h2>There are no cases to read</h2>


Suggested change

<h2>There are no cases to read</h2>

<h2>>There are no more cases available</h2>

avoiding duplicating 'read' and 'read' in heading and text

dannychadburn · 2026-06-26T13:55:31Z

+  {% elif userReadableTotal == 0 %}
+
+    <h2>There are no cases to read</h2>
+    <p>All cases have been read.</p>


Suggested change

All cases have been read.

You have completed all the cases you are eligible to read.

dannychadburn · 2026-06-26T13:56:07Z


    <h2>Start image reading</h2>
-    <p>Give your opinion on the next {{ defaultSessionSize }} cases due for reading.</p>
+    <p>Give your opinion on cases due for reading (up to {{ defaultSessionSize }}).</p>


Suggested change

Give your opinion on cases due for reading (up to {{ defaultSessionSize }}).

Give your opinion on cases due for reading.

Removing mentions of any case numbers in this sentence as it doesn't flow well - suggest secondary text below the button to clarify what they session size is

dannychadburn · 2026-06-26T13:56:36Z

      text: "Start now",
      href: "/reading/create-session?type=all_reads"
    }) }}



Suggested change

 

Your reading session will include up to {{ defaultSessionSize }} cases

Added this as secondary text below the start button as the 'up to' muddles the sentence above - it's not particularly essential info

dannychadburn · 2026-06-26T13:58:31Z

+    <span class="nhsuk-caption-l">Image reading</span>
+    <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
+
+    <p>All eligible cases in this session have been read.</p>


Suggested change

All eligible cases in this session have been read.

You have given an opinion on all available cases.

dannychadburn · 2026-06-26T13:59:09Z

+        text: "Review session outcomes",
+        href: "/reading/session/" + sessionId
+      }) }}
+      <a href="/reading" class="nhsuk-link nhsuk-button-group__item">Exit reading</a>


Suggested change

<a href="/reading" class="nhsuk-link nhsuk-button-group__item">Exit reading</a>

<a href="/reading" class="nhsuk-link nhsuk-button-group__item">Exit session</a>

dannychadburn · 2026-06-26T13:59:38Z

+{% set hideStatusBar = true %}
+{% set hideBackLink = true %}
+
+{% set pageHeading = "No more cases to read" %}


Suggested change

{% set pageHeading = "No more cases to read" %}

{% set pageHeading = "Session complete" %}

dannychadburn · 2026-06-26T14:04:44Z

    <div class="nhsuk-grid-column-two-thirds">
      <h1>{{ pageHeading }}</h1>
-      <p>{{ backlogTotal }} cases require reading</p>
+      <p>{{ userReadableTotal }} {{ "case" | pluralise(userReadableTotal) }} available to read</p>


Suggested change

{{ userReadableTotal }} {{ "case" | pluralise(userReadableTotal) }} available to read

{{ userReadableTotal }} {{ "case" | pluralise(userReadableTotal) }} are awaiting an outcome

Related issue https://nhsd-jira.digital.nhs.uk/browse/DTOSS-13222

This distinguishes all reads from those available to the user to read - ie, "awaiting an outcome" could cover 1st or 2nd reads, in arbitration, awaiting priors, deferred, etc

Also, have suggested some visual distinction for this paragraph - lots of similar looking lines of text on the page currently

dannychadburn · 2026-06-26T14:11:21Z

@@ -117,13 +125,23 @@
      href: "/reading/session/" + inProgressSession.id + "/resume"
    }) }}


Suggested change

}) }}

}) }}

 

{{ inProgressSession.userReadCount }} of {{ inProgressSession.targetSize }} cases read

Suggest moving this below the start button to avoid lots of text paragraphs (similar suggestion made on the regular start page)

dannychadburn · 2026-06-26T14:12:49Z


    <h2>Resume image reading</h2>
    <p>You have an image reading session in progress. Finish it before starting a new one.</p>
    <p>{{ inProgressSession.userReadCount }} of {{ inProgressSession.targetSize }} cases read.</p>


Suggested change

Removes progress count from here (added as secondary info below button to mirror suggestion on regular start page

dannychadburn · 2026-06-26T14:19:53Z

Suggest we remove the 'Start a new session' button on session overview if there are no more cases available for the user to read

Empty states for image reading

a696f3a

edwardhorsford temporarily deployed to manage-breas-ir-empty-s-ch0vwi June 25, 2026 14:57 Inactive

rivalee marked this pull request as ready for review June 25, 2026 14:58

rivalee requested review from dannychadburn and edwardhorsford and removed request for dannychadburn June 25, 2026 15:03

Remove new session button when all cases read, disable start button w…

5d01ae4

…hen all cases read

edwardhorsford deployed to manage-breas-ir-empty-s-ch0vwi June 25, 2026 15:58 View deployment

dannychadburn reviewed Jun 26, 2026

View reviewed changes


		{% elif userReadableTotal == 0 %}

		<h2>There are no cases to read</h2>

	<h2>There are no cases to read</h2>
	<h2>>There are no more cases available</h2>

	<p>All cases have been read.</p>
	<p>You have completed all the cases you are eligible to read.</p>

	<p>Give your opinion on cases due for reading (up to {{ defaultSessionSize }}).</p>
	<p>Give your opinion on cases due for reading.</p>


	<br>
	<span class="nhsuk-u-secondary-text-colour nhsuk-body-s">Your reading session will include up to {{ defaultSessionSize }} cases</span>

	<p>All eligible cases in this session have been read.</p>
	<p>You have given an opinion on all available cases.</p>

	<a href="/reading" class="nhsuk-link nhsuk-button-group__item">Exit reading</a>
	<a href="/reading" class="nhsuk-link nhsuk-button-group__item">Exit session</a>

	{% set pageHeading = "No more cases to read" %}
	{% set pageHeading = "Session complete" %}

	<p>{{ userReadableTotal }} {{ "case" \| pluralise(userReadableTotal) }} available to read</p>
	<p class="nhsuk-u-secondary-text-colour nhsuk-body-l">{{ userReadableTotal }} {{ "case" \| pluralise(userReadableTotal) }} are awaiting an outcome</p>

		@@ -117,13 +125,23 @@
		href: "/reading/session/" + inProgressSession.id + "/resume"
		}) }}

-    }) }}
+    }) }}
+    <br>
+    <span class="nhsuk-u-secondary-text-colour app-nowrap nhsuk-body-s">{{ inProgressSession.userReadCount }} of {{ inProgressSession.targetSize }} cases read</span>

Uh oh!

Conversation

rivalee commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Update generic start page content

Empty state start page for image reading (no cases)

Interstitial / interruption when there's no more cases to read

Session overview

Uh oh!

dannychadburn commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dannychadburn commented Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rivalee commented Jun 25, 2026 •

edited

Loading

dannychadburn commented Jun 26, 2026 •

edited

Loading

dannychadburn Jun 26, 2026 •

edited

Loading

dannychadburn Jun 26, 2026 •

edited

Loading

dannychadburn Jun 26, 2026 •

edited

Loading

dannychadburn Jun 26, 2026 •

edited

Loading

dannychadburn Jun 26, 2026 •

edited

Loading